<template>
	<view class="content">
		<view class="row address">
			<view class="col-22">
				<view class="col-24 bott_bold">
					<view class="row">
						<view class="col-2">
							<image src="../../static/trip/scd@2x.png" mode="heightFix"></image>
						</view>
						<view class="col-18">
							<picker style="width: 100%;" mode="selector" :range="startPlaces" range-key="placeName" @change="startChange">
								<view>{{timeObj.start.title}}</view>
							</picker>
						</view>
						<view class="col-4 t_right">
							<!-- <text class="iconfont icon-youjiantou"></text> -->
						</view>
					</view>
				</view>
				<view class="col-24">
					<view class="row">
						<view class="col-2">
							<image src="../../static/trip/xcd@2x.png" mode="heightFix"></image>
						</view>
						<view class="col-18">
							<picker mode="selector" :range="endPlaces" range-key="placeName" @change="endChange">
								<view>{{timeObj.over.title}}</view>
							</picker>
						</view>
						<view class="col-4 t_right">
							<!-- <text class="iconfont icon-youjiantou"></text> -->
						</view>
					</view>
				</view>
			</view>
			<view class="col-2 switch t_right">
				<text class="iconfont icon-qiehuan" @click="exchange()"></text>
			</view>
		</view>
		<view class="row po_message">
			<view class="col-24 bott_bold">
				<view class="row">
					<view class="col-2">
						<image src="../../static/trip/yysj@2x.png" mode="heightFix"></image>
					</view>
					<view class="col-22">
						<view class="row" style="justify-content: space-between;">
							<view>
								预约时间
							</view>
							<view @click="visible=true">
								<text>{{timeObj.day}} {{timeObj.time}}<text
										class="iconfont icon-youjiantou"></text></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="col-24 bott_bold">
				<view class="row">
					<view class="col-2">
						<image src="../../static/trip/ccrs@2x.png" mode="heightFix"></image>
					</view>
					<view class="col-22">
						<view class="row" style="justify-content: space-between;">
							<view>
								乘车人数<text class="t_size_24" style="margin-left: 5px;">(婴幼儿需计人数)</text>
							</view>
							<view @click="r_visible=true">
								<text>{{timeObj.people}}人<text class="iconfont icon-youjiantou"></text></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="col-24">
				<view class="row">
					<view class="col-2">
						<image src="../../static/trip/cclxr@2x.png" mode="heightFix"></image>
					</view>
					<view class="col-22">
						<view class="row" style="justify-content: space-between;">
							<view>
								常用联系人
							</view>
							<view @click="$public.navTo('trip/cj/cj_rider')">
								<text>{{timeObj.contacts.name}}<text class="iconfont icon-youjiantou"></text></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row po_message">
			<view class="col-24 bott_bold">
				<view class="row">
					<view class="col-2">
						<image src="../../static/trip/yhq@2x.png" mode="heightFix"></image>
					</view>
					<view class="col-22">
						<view class="row" style="justify-content: space-between;">
							<view>
								使用优惠券
							</view>
							<view>
								<text>无<text class="iconfont icon-youjiantou"></text></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="col-24 bott_bold">
				<view class="row">
					<view class="col-2">
						<image src="../../static/trip/bzxx@2x.png" mode="heightFix"></image>
					</view>
					<view class="col-22">
						<view class="row" style="justify-content: space-between;">
							<view class="col-6">
								备注信息
							</view>
							<view @click="timeObj.remarks = true" class="bzxx col-18 t_right">
								<block v-if="timeObj.remarks_str.length == 0">
									<text>无</text>
								</block>
								<block v-else>
									<text v-for="(item,index) in timeObj.remarks_str"
										:key="index">{{item}}{{index+1 == timeObj.remarks_str.length ? '' : ','}}</text>
								</block>
								<text class="iconfont icon-youjiantou"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row po_message">
			<view class="col-24 bott_bold">
				<view class="row">
					<view class="col-2">
						<image src="../../static/trip/yzf@2x.png" mode="heightFix"></image>
					</view>
					<view class="col-22">
						<view class="row" style="justify-content: space-between;">
							<view>
								预支付金额
							</view>
							<view class="yu_pay t_size_32">
								<text class="t_size_26">￥</text>
								{{orderData.orderPrice}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="row po_btn">
			<view class="col-24 t_center">
				<button type="primary" @click="subOrder()">去支付</button>
			</view>
			<view class="col-24 t_center ccxz t_size_28">
				<text @click="$public.navTo('trip/cj/sure_ccxz')">查看乘车须知</text>
			</view>
		</view>
		<select-timer :visible="visible" @change="time_change" @close="timeClose"></select-timer>
		<select-radio :visible="r_visible" :radioList="['1','2','3','4','5']" @change="radioChange"
			@close="closeRadio"></select-radio>
		<select-remarks :remarks="timeObj.remarks" :list="timeObj.list" :remarks_str="timeObj.remarks_str"
			@changeIndex="changeIndex" @closeChange="closeChange"></select-remarks>
	</view>
</template>

<script>
	import select_timer from '@/components/select-timer/select-timer.vue'
	import select_radio from '@/components/select-radio/select-radio.vue'
	import select_remarks from '@/components/select-remarks/select-remarks.vue'
	export default {
		components: {
			"select-timer": select_timer,
			"select-radio": select_radio,
			"select-remarks": select_remarks
		},
		data() {
			return {
				visible: false, //选择预约时间
				r_visible: false, //选择人数
				timeObj: {
					start: {
						title: '',
						latitude: 0,
						longitude: 0
					},
					over: {
						title: '',
						latitude: 0,
						longitude: 0
					},
					contacts: {
						name: '请选择联系人',
						phone: 0
					},
					day: '',
					time: '',
					people: "1",
					remarks: false,
					list: [],
					remarks_str: []
				},
				orderData:{
					orderPrice: '--',
					orderPriceBasics: '--',
					orderPriceDiscount: '--'
				},
				objPage:{
					driverid: 1460,
					cityLineId: 185,
					lineReverse: 1
				},
				startPlaces: [{placeName: '',placeLat:'',placeLon:''}],
				startIndex: 0,
				endPlaces: [{placeName:'',placeLat:'',placeLon:''}],
				endIndex: 0
			}
		},
		onLoad(option) {
			if(option.q){
				let string = option.q;
				string = string.split('%3F')[1].split('%3D');
				let arr = [];
				string.forEach(item =>{
					if(item.indexOf('%26') != -1){
						let itemArr = item.split('%26');
						arr.push(itemArr[0]);
						arr.push(itemArr[1]);
					}else{
						arr.push(item);
					}
				})
				this.objPage.driverid = arr[1];
				this.objPage.cityLineId = arr[3];
				this.objPage.lineReverse = arr[5];
			}else{
				this.objPage.driverid = option.isscancode_driverid;
				this.objPage.cityLineId = option.isscancode_lineid;
				this.objPage.lineReverse = option.isscancode_linereverse;
			}
			this.load()
		},
		onShow() {
			if (uni.getStorageSync('objContacts')) {
				this.timeObj.contacts = uni.getStorageSync('objContacts');
				uni.removeStorageSync('objContacts');
				this.countPrice()
			}
		},
		methods: {
			async load() {
				let res = await this.$api.request(this.$api.intercity.getOrderRemarksList);
				if (res) {
					this.timeObj.list = res;
				}
				this.LineList();
			},
			async LineList(){
				uni.showLoading()
				let res = await this.$api.request(this.$api.intercity.getLineToPlaceList,this.objPage);
				if(res){
					this.startPlaces = res.startPlaces;
					this.timeObj.start.title = this.startPlaces[this.startIndex].placeName;
					this.timeObj.start.adcode = this.startPlaces[this.startIndex].cityCode;
					this.timeObj.start.cityCode = this.startPlaces[this.startIndex].cityCode;
					this.timeObj.start.latitude = this.startPlaces[this.startIndex].placeLat;
					this.timeObj.start.longitude = this.startPlaces[this.startIndex].placeLon;
					this.endPlaces = res.endPlaces;
					this.timeObj.over.title = this.endPlaces[this.endIndex].placeName;
					this.timeObj.over.latitude = this.endPlaces[this.endIndex].placeLat;
					this.timeObj.over.longitude = this.endPlaces[this.endIndex].placeLon;
					this.timeObj.over.adcode = this.endPlaces[this.endIndex].cityCode;
					this.timeObj.over.cityCode = this.endPlaces[this.endIndex].cityCode;
					this.countPrice();
				}
			},
			async countPrice() {
				this.objPrice = {
					couponId: 0, //优惠券ID,
					endCityAreaCode: this.timeObj.over.adcode.toString(), //目的城市区县Code,
					endCityCode: this.timeObj.over.cityCode.toString(), //目的城市Code,
					getOffLat: this.timeObj.over.latitude, //下车点纬度,
					getOffLon: this.timeObj.over.longitude, //下车点经度,
					getOffPoint: this.timeObj.over.title, //下车点名称,
					getOnLat: this.timeObj.start.latitude, //上车点纬度,
					getOnLon: this.timeObj.start.longitude, //上车点经度,
					getOnPoint: this.timeObj.start.title, //上车点名称,
					isScanCode: 2, //是否为专车码下单： 1 正常下单、 2 专车码扫码下单,
					isScanCodeDriverId: this.objPage.driverid, //专车码绑定司机ID,
					isScanCodeLineId: this.objPage.cityLineId, //专车码绑定线路ID,
					isScanCodeLineReverse: this.objPage.lineReverse, //专车码绑定线路方向： 1 正向、 2 反向,
					startCityAreaCode: this.timeObj.start.adcode.toString(), //出发城市区县Code,
					startCityCode: this.timeObj.start.cityCode.toString(), //出发城市Code,
					startPlaceId: this.startPlaces[this.startIndex].id, //专车码线路出发途经点id,
					endPlaceId: this.endPlaces[this.endIndex].id, //专车码线路目的途经点id,
					ticketNum: this.timeObj.people, //购票数量乘车人数
					orderFrom: 1 , // 1小程序 2乘客APP 
					payType: 2 , // 1支付宝、2微信 
				}
				let res = await this.$api.request(this.$api.order.getOrderPrice,this.objPrice);
				if(res){
					this.orderData = res;
				}
				uni.hideLoading();
			},
			async subOrder(){
				if(this.timeObj.contacts.phone == 0){
					this.$public.showToast('请选择常用联系人')
					return
				}
				if(this.timeObj.day == '今天'){
					this.objPrice.departData = `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`;
				}else{
					this.objPrice.departData = this.timeObj.day;
				}
				this.objPrice.departTime = this.timeObj.time;
				this.objPrice.userName = this.timeObj.contacts.name;
				this.objPrice.userPhone = this.timeObj.contacts.phone;
				this.objPrice.orderRemarks = '';
				this.timeObj.remarks_str.forEach((item,index) => {
					if(index+1 == this.timeObj.remarks_str.length){
						this.objPrice.orderRemarks += item;
					}else{
						this.objPrice.orderRemarks += item + ',';
					}
					
				})
				let that = this;
				// #ifdef MP-WEIXIN
				wx.login({
					async success(logResult){
						// that.$public.navTo('trip/trip_detail?id='+712)
						// return
						that.objPrice.code = logResult.code;
						let res = await that.$api.request(that.$api.order.subOrder,that.objPrice);
						if(res){
							wx.requestPayment({
								timeStamp: res.timeStamp,
								nonceStr: res.nonceStr,
								package: res.package,
								paySign: res.paySign,
								signType: res.signType,
								success(success){
									// console.log(success)
									that.$public.showToast('支付成功');
									setTimeout(()=>{
										that.$public.redTo('trip/trip_detail?id='+res.intercityOrderId)
									},800)
								},
								fail(fail){
									that.$public.showToast('用户取消支付')							
								}
							})
						}
					}
				})
				// #endif
				
			},
			time_change(e) {
				this.timeObj.day = e.day;
				this.timeObj.time = e.time;
				this.visible = false;
			},
			timeClose() {
				this.visible = false;
			},
			radioChange(e) {
				this.timeObj.people = e;
				this.r_visible = false;
			},
			closeRadio() {
				this.r_visible = false;
			},
			changeIndex(e) {
				if (this.timeObj.remarks_str.indexOf(e) != -1) {
					this.timeObj.remarks_str.remove(e)
				} else {
					this.timeObj.remarks_str.push(e);
				}
			},
			closeChange() {
				this.timeObj.remarks = false;
			},
			startChange({detail}){
				this.startIndex = detail.value;
				this.timeObj.start.title = this.startPlaces[detail.value].placeName;
				this.timeObj.start.latitude = this.startPlaces[detail.value].placeLat;
				this.timeObj.start.longitude = this.startPlaces[detail.value].placeLon;
				this.timeObj.start.adcode = this.startPlaces[detail.value].cityCode;
				this.timeObj.start.cityCode = this.startPlaces[detail.value].cityCode;
				this.countPrice();
			},
			endChange({detail}){
				this.endIndex = detail.value;	
				this.timeObj.over.title = this.endPlaces[detail.value].placeName;
				this.timeObj.over.latitude = this.endPlaces[detail.value].placeLat;
				this.timeObj.over.longitude = this.endPlaces[detail.value].placeLon;
				this.timeObj.over.adcode = this.endPlaces[detail.value].cityCode;
				this.timeObj.over.cityCode = this.endPlaces[detail.value].cityCode;	
				this.countPrice();
			},
			exchange(){
				let sAr = JSON.parse(JSON.stringify(this.startPlaces)),
					sIndex = this.startIndex,
					eAr = JSON.parse(JSON.stringify(this.endPlaces)),
					eIndex = this.endIndex;
				this.startPlaces = JSON.parse(JSON.stringify(eAr));
				this.startIndex = eIndex;
				this.endPlaces = JSON.parse(JSON.stringify(sAr));
				this.endIndex = sIndex;
				this.timeObj.start.title = this.startPlaces[this.startIndex].placeName;
				this.timeObj.start.latitude = this.startPlaces[this.startIndex].placeLat;
				this.timeObj.start.longitude = this.startPlaces[this.startIndex].placeLon;
				this.timeObj.start.adcode = this.startPlaces[this.startIndex].cityCode;
				this.timeObj.start.cityCode = this.startPlaces[this.startIndex].cityCode;	
				this.timeObj.over.title = this.endPlaces[this.endIndex].placeName;
				this.timeObj.over.latitude = this.endPlaces[this.endIndex].placeLat;
				this.timeObj.over.longitude = this.endPlaces[this.endIndex].placeLon;
				this.timeObj.over.adcode = this.endPlaces[this.endIndex].cityCode;
				this.timeObj.over.cityCode = this.endPlaces[this.endIndex].cityCode;
				this.objPage.lineReverse = this.objPage.lineReverse == 1 ? 2 : 1
				this.countPrice();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.content {
		padding: 5rpx 0;
	}

	.bott_bold {
		border-bottom: 1px solid #EDEDED;
	}

	.address {
		width: 92%;
		padding: 0 4%;
		background-color: #FFFFFF;
		height: 192rpx;
		line-height: 96rpx;
		margin-top: 18rpx;

		.switch{
			line-height: 192rpx;
			.iconfont{
				font-size: 50rpx;
			}
		}

		.col-18 {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		image {
			margin-top: 40rpx;
			height: 16rpx;
		}

		.iconfont {
			color: #999999;
		}
	}

	.po_message {
		width: 92%;
		padding: 0 4%;
		margin-top: 23rpx;
		line-height: 96rpx;
		background-color: #FFFFFF;

		.row {
			height: 96rpx;
			line-height: 96rpx;
		}

		image {
			height: 40rpx;
			margin-top: 30rpx;
		}

		text {
			color: #999999;
		}

		.yu_pay {
			color: #FF2626;

			text {
				color: #FF2626;
			}
		}
	}

	.po_btn {
		width: 92%;
		padding: 61rpx 4%;

		button[type="primary"] {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			background-color: #6CBF30;
		}
		.ccxz{
			margin-top: 45rpx;
			color: #6CBF30;
			text{
				text-decoration: underline;
			}
		}
	}

	.bzxx {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
